<template>
  <view class="get_keys_box">
    <view class="get_keys_label">{{ title }}</view>
    <view class="get_keys_methods">
      <view v-for="item in getKeysMethods" :key="item.id" :class="['get_keys_methods_item', { get_keys_methods_item_pick: selectedGetKeysMethods == item.id }]" @tap="pickUpKeyMethods(item)">
        {{ item.name }}
      </view>
    </view>
    <view class="textarea-box" v-show="selectedGetKeysMethods == 3">
      <textarea v-model="content" class="textarea" placeholder="请输入" :maxlength="maxLength" />
      <view class="word-count">{{ contentLength }}/{{ maxLength }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

const selectedGetKeysMethods = ref(0);
const content = ref("");
const maxLength = ref(200);
const contentLength = computed(() => content.value.length);

interface KeyMethods {
  id: number;
  name: string;
}

// 交接方式: 0-有人在家;1-密码;2-丰巢存件;3-其他; 4-面交; 5-快递; 6-闪送; 7-放在指定位置;
const getKeysMethods = ref<KeyMethods[]>([
  { id: 0, name: "有人在家" },
  { id: 1, name: "密码" },
  { id: 2, name: "丰巢存件" },
  { id: 4, name: "面交" },
  { id: 5, name: "快递" },
  { id: 6, name: "闪送" },
  { id: 7, name: "放在指定位置" },
  { id: 3, name: "其他" },
]);

const pickUpKeyMethods = (data: KeyMethods): void => {
  if (selectedGetKeysMethods.value == data.id) {
    selectedGetKeysMethods.value = null;
    return;
  }
  if (data.id == 3) {
    content.value = "";
  }
  selectedGetKeysMethods.value = data.id;
};




const title = ref("");

interface Props {
  title: string;
  keyMethodsId: number;
  content: string;
}

const init = (data: Props): void => {
  title.value = data.title;
  selectedGetKeysMethods.value = data.keyMethodsId || 0;
  content.value = data.keyMethodsId == 3 ? data.content : ""
};

const confirm = (): { id: number; content: string } | null => {
  if (!validateInput()) {
    uni.showToast({
      title: "请输入内容",
      icon: "none",
    });
    return null;
  }
  return {
    id: selectedGetKeysMethods.value,
    content: selectedGetKeysMethods.value == 3 ? content.value : "",
  };
};

const validateInput = (): boolean => {
  if (selectedGetKeysMethods.value == 3) {
    return content.value.length > 0;
  }
  return true;
};


defineExpose({
  init,
  confirm,
});
</script>

<style lang="scss" scoped>
.get_keys_box {
  padding: 32rpx 24rpx;
  background: #ffffff;
  border-radius: 24rpx;

  .get_keys_label {
    font-size: 30rpx;
    font-weight: bold;
    color: #1a1a1a;
	padding-bottom: 40rpx;
    margin-bottom: 16rpx;
	border-bottom: 1px solid #F5F6F7;
  }

  .get_keys_methods {
    margin-top: 40rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16rpx 8rpx ;

    .get_keys_methods_item {
      padding: 16rpx 32rpx;
      background: #ffffff;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #5c5e5e;
      border: 1rpx solid #cacccc;
      text-align: center;
    }

    .get_keys_methods_item_pick {
      color: #ff6084;
      border: 1rpx solid #ff6084;
    }
  }
}

.textarea-box {
  margin-top: 16rpx;
  position: relative;
  background-color: #f8f8f8;
  padding: 32rpx;
  min-height: 200rpx;
  border-radius: 24rpx 24rpx 24rpx 24rpx;

  .textarea {
    width: 100%;
    height: 160rpx;
    font-size: 30rpx;
    line-height: 1.5;
  }

  .word-count {
    position: absolute;
    bottom: 32rpx;
    right: 32rpx;
    font-size: 26rpx;
    color: #999;
  }
}
</style>
